<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts地图演示实例</title>
    <script src='js/vue2.js'></script>
    <script src='js/utils.js'></script>
    <script src='js/jquery.min.js'></script>
    <script src='js/echarts.min.js'></script>
    <script src='js/page.js'></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<body>
<div class="viewport" id="home">
    <div class="links">
        <button @click="copyName">复制下辖地区</button>
        <button @click="copyData">复制数据</button>
        <button @click="copyDesc">复制描述</button>
        <button @click="copyTitle">复制标题</button>
<!--        <button @click="copyPic">复制图片</button>-->
        <button @click="copyGeoCoordMap">复制中心点</button>
        <input type="text" id="input">
        <select v-model="active">
            <option v-for="(item,index) in list" :value="item.title" :key="index">
                {{item.title}}
            </option>
        </select>
    </div>
    <div class="viewports">
        <iframe :src="active+'/index.html'" width="100%" height="100%" frameborder="0"></iframe>
    </div>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el: "#home",
        data: {
            active: '01echarts常规map',
            mapName: '',
            geoCoordMap: {},
            mapInfos: '',
            list: [],
            img: ''
        },
        mounted: function () {
            this.list = pageList
            this.getData()
        },
        computed: {},
        methods: {
            copyName() {
                var input = document.getElementById("input");
                input.value = this.mapName; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
            },
            copyData() {
                var input = document.getElementById("input");
                input.value = this.mapInfos; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
            },
            copyPic() {
                var that = this;
                //创建一个新的canvas
                document.documentElement.scrollTop = 0
                window.pageYOffset = 0
                document.body.scrollTop = 0
                var canvas2 = document.createElement("canvas");
                let canvasObj = document.querySelector('.viewports');
                var w = parseInt(window.getComputedStyle(canvasObj).width);   //获取目标元素的宽高
                var h = parseInt(window.getComputedStyle(canvasObj).height);
                //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
                var context = canvas2.getContext("2d");
                context.scale(2, 2);
                canvas2.width = w;
                canvas2.height = h;
                html2canvas(document.querySelector('.viewports'), {canvas: canvas2}).then(function (canvas) {
                    var input = document.getElementById("input");
                    input.value = canvas.toDataURL("image/png"); // 修改文本框的内容
                    input.select(); // 选中文本
                    that.img = input.value
                    document.execCommand("copy"); // 执行浏览器复制命令
                });
            },
            copyDesc() {
                var input = document.getElementById("input");
                var desc = ''
                this.list.forEach((type) => {
                    if (type.title == this.active) {
                        desc = type.desc
                    }
                });
                input.value = desc; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
            },
            copyTitle() {
                var input = document.getElementById("input");
                input.value = this.active; // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
            },
            copyGeoCoordMap() {
                var input = document.getElementById("input");
                input.value = JSON.stringify(this.geoCoordMap); // 修改文本框的内容
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
            },
            // 获取数据
            getData() {
                var that = this;
                $.get('js/data.json', function (data) {
                    that.mapName = ''
                    var mapInfo = []
                    var geoCoordMap = {};
                    console.log(data)
                    data.features.forEach(function (v, index) {
                        that.mapName = that.mapName + (that.mapName ? ',' : '') + v.properties.name
                        var name = v.properties.name;
                        // 地区经纬度
                        geoCoordMap[name] = v.properties.center;
                        mapInfo.push({
                            name: v.properties.name,
                            center: v.properties.center
                        })
                    });
                    that.mapInfos = JSON.stringify(mapInfo)
                    console.log(that.mapInfos)
                    that.geoCoordMap = geoCoordMap
                });
            },
        },
    })
</script>
<style>
    html, body {
        padding: 0;
        margin: 0;
    }

    #home {
        width: 100%;
        height: 100%;
        background: #0d1551;
        position: fixed;
        top: 0;
    }

    .viewports {
        position: fixed;
        width: 100%;
        height: 500px;
        top: 10%;
    }

    .echarts {
        width: 100%;
        height: 100%;
        background: #0d1551;
        position: fixed;
    }

    .img {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 10;
    }

    .links {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 10;

    }

    .links a {
        text-decoration: none;
        color: #fff;
    }
</style>
